<template>
  <div id="nav">
    <div id="up">
      <div
        id="title"
        class="son"
        @click="
          () => {
            componentStore.$reset()
            router.push({ name: 'Home' })
          }
        "
      >
        <img
          src="@/assets/svgviewer-output.svg"
          alt="#"
        />
        K音乐
      </div>
      <div class="son">
        <ul
          id="up-ul"
          class="son"
        >
          <li
            class="up-items son"
            :class="{ mark: index === upSelected }"
            v-for="(item, index) in upOptions"
            :key="index"
            @click="changeUpSelected(index)"
          >
            {{ item }}
            <svg
              v-if="index === upSelected"
              class="arrow"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 1024 1024"
            >
              <path
                fill="currentColor"
                d="m488.832 344.32-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0"
              ></path>
            </svg>
          </li>
        </ul>
      </div>
      <div>
        <el-input
          v-model="input"
          style="width: 240px"
          placeholder="......"
          :prefix-icon="Search"
        />
      </div>
      <div
        class="son"
        id="user"
      >
        <a
          id="login"
          @click="isLogin = true"
          v-if="userVO === null"
        >
          登录
        </a>
        <a
          v-else
          id="vo"
          ><img
            alt=""
            :src="userVO.avatarUrl"
            id="avatar"
          />
          <el-dropdown>
            <span class="el-dropdown-link">{{ userVO.nickname }}</span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="(item, index) in filterOptions"
                  :key="index"
                  class="el-dropdown-item"
                  @click="transfer(index)"
                >
                  {{ item.item }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </a>
      </div>
    </div>
    <div id="down">
      <ul
        id="down-ul"
        v-if="upSelected === 0"
      >
        <li
          class="down-items"
          :class="{ mark: index === downSelected }"
          @click="changeDownSelected(index)"
          v-for="(item, index) in downOptions"
          :key="index"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <Login
      v-if="isLogin"
      id="login-panel"
      @close="handleIsClose"
    ></Login>
    <UpLoadSongs
      v-if="isUploadSongs"
      id="upload-songs"
      @close="handleIsClose"
    ></UpLoadSongs>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, onUpdated, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import Login from '@components/Login.vue'
import { useUserStore } from '@/stores/userStore.ts'
import { postUserVOAPI } from '@/services/userService.ts'
import type { UnifyResponse, UserVO } from '@/types/result'
import UpLoadSongs from '@components/UpLoadSongs.vue'
import router from '@/utils/router'
import { useComponentStore } from '@/stores/componentStore.ts'

const upOptions = ['发现音乐', '我的音乐']
const downOptions = ['推荐', '排行榜', '歌手']
const userOptions = [
  { flag: 0, item: '个人中心' },
  { flag: 1, item: '上传音乐' },
  {
    flag: 2,
    item: '删除音乐',
  },
  { flag: 3, item: '用户管理' },
  { flag: 4, item: '消息管理' },
  { flag: 5, item: '退出' },
]
const input = ref('')
const componentStore = useComponentStore()
const upSelected = computed(() => {
  return componentStore.upSelected
})
const downSelected = computed(() => {
  return componentStore.downSelected
})
const isLogin = ref<boolean>(false)
const isUploadSongs = ref<boolean>(false)
const userStore = useUserStore()
const userVO = ref<UserVO | null>(null)
const filterOptions = computed(() => {
  if (userStore.userVO != null && userStore.userVO.access !== 1) {
    return userOptions.filter(item => item.flag !== 1)
  }
  return userOptions
})

const handleIsClose = (flag: number, isClose: boolean) => {
  switch (flag) {
    case 0:
      router.push({
        name: 'Home',
      })
      changeUpSelected(0)
      changeDownSelected(0)
      isLogin.value = isClose
      break
    case 1:
      isUploadSongs.value = isClose
      break
  }
}

function changeUpSelected(id: number) {
  componentStore.upSelected = id
  switch (id) {
    case 0:
      componentStore.downSelected = 0
      router.push({
        name: 'Home',
      })
      break
    case 1:
      router.push({
        path: '/UserSongs',
      })
      break
  }
}

function changeDownSelected(id: number) {
  componentStore.downSelected = id
  switch (id) {
    case 0:
      router.push({
        name: 'Home',
      })
      break
    case 1:
      router.push({
        name: 'Rank',
      })
      break
    case 2:
      router.push({
        name: 'Artists',
      })
      break
  }
}

function logout() {
  userStore.$reset()
  componentStore.$reset()
  userVO.value = null
  router.push({
    name: 'Home',
  })
  changeUpSelected(0)
  changeDownSelected(0)
}

function transfer(index: number) {
  switch (index) {
    case 0:
      componentStore.upSelected = 1
      router.push({
        path: '/UserSongs/Personal',
      })
      break
    case 1:
      isUploadSongs.value = true
      break
    case 2:
      break
    case 3:
      break
    case 4:
      componentStore.upSelected = 1
      router.push({
        path: '/UserSongs/Message',
      })
      break
    case 5:
      logout()
      break
  }
}

onBeforeMount(async () => {
  if (userStore.token !== null) {
    const userStore = useUserStore()
    try {
      const res: UnifyResponse<UserVO> = await postUserVOAPI()
      userStore.userVO = res.data
      userVO.value = userStore.userVO
    } catch (e) {
      userStore.$reset()
      return Promise.reject(e)
    }
  }
})

onUpdated(() => {
  userVO.value = userStore.userVO
})
</script>

<style scoped>
#up {
  height: 3rem;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #242424;
}

img {
  width: 1.5em;
  height: 1.5em;
}

#title {
  min-width: 4.2em;
  font-weight: bold;
  font-size: 1.5em;
  color: #58a9d1;
  display: flex;
  align-items: center;
  margin-right: 1em;
  cursor: pointer;
}

.son {
  height: 100%;
}

#up-ul {
  margin-right: 1em;
  display: flex;
  flex-direction: row;
}

.up-items {
  width: 5em;
  color: #58a9d1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.up-items:hover {
  background-color: #08a6a6;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}

.arrow {
  position: absolute;
  top: 2.5em;
  right: 1.25em;
  transform: translate(-50%, -50%);
  width: 1.25em;
  color: #76ae9f;
}

#down {
  width: 100%;
  min-height: 0.5em;
  background-color: #438c12;
}

#down-ul {
  width: 30vw;
  margin: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.down-items {
  width: 2em;
  height: 2em;
  min-width: 4em;
  text-align: center;
  cursor: pointer;
  color: #e3ed93;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.down-items:hover {
  background-color: #6a0c0c;
  border-radius: 50%;
}

.mark {
  font-weight: bold;
  font-size: 1em;
}

#user {
  width: 8em;
  min-width: 8em;
  height: 100%;
  text-align: center;
  color: #58a9d1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#login:hover {
  cursor: pointer;
  font-weight: bold;
}

#nav {
  position: relative;
}

#login-panel {
  position: absolute;
}

#avatar {
  background-color: #ffffff;
  border-radius: 50%;
  width: 2em;
  height: 2em;
}

#vo {
  display: flex;
  align-items: center;
  margin-left: 2em;
  justify-content: space-between;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.el-dropdown-link:focus {
  outline: none;
}
</style>
